<template>
	<div class="page">
		<el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm"
			@keyup.enter.native="refreshList()" @submit.native.prevent>
			<!-- 搜索框-->
			<el-form-item prop="assetsTtype">
				<el-select v-model="searchForm.assetsTtype" placeholder="请选择资产状态" size="small" style="width: 100%;">
					<el-option v-for="item in $dictUtils.getDictList('assets_type')" :key="item.value"
						:label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="office.id">
				<SelectTree ref="office.id" :props="{
                      value: 'id',             // ID字段名
                      label: 'name',         // 显示名称
                      children: 'children'    // 子级字段名
                    }" placeholder="请选择归属部门" size="small" :url="'/dlyrlTest/findOffice?companyId='+companyId"
					:value="searchForm.office.id" :clearable="true" :accordion="true"
					@getValue="(value) => {searchForm.office.id=value}" />
			</el-form-item>
			<el-form-item prop="assetsNumber">
				<el-input size="small" v-model="searchForm.assetsNumber" placeholder="资产编码" clearable></el-input>
			</el-form-item>
			<el-form-item prop="assetsName">
				<el-input size="small" v-model="searchForm.assetsName" placeholder="资产名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="refreshList()" size="small">查询</el-button>
				<el-button @click="resetSearch()" size="small">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 导入导出-->
		<el-dialog title="导入Excel" :visible.sync="isImportCollapse">
			<el-form size="small" :inline="true" v-show="isImportCollapse" ref="importForm">
				<el-form-item>
					<el-button type="default" @click="downloadTpl()" size="small">下载模板</el-button>
				</el-form-item>
				<el-form-item prop="loginName">
					<el-upload class="upload-demo"
						:action="`${this.$http.BASE_URL}/dlyrl/oa/fixedassets/fixedAssets/import`"
						:on-success="uploadSuccess" :show-file-list="true">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只允许导入“xls”或“xlsx”格式文件！</div>
					</el-upload>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 维修 -->
		<el-dialog title="维修" :visible.sync="restoreDialog">
			<el-form :model="restores" size="small" ref="restores" label-width="80px">
				<el-col>
					<el-form-item label="图片" prop="repairpicture" :rules="[ {required: true, message:'维修图片不能为空', trigger:'blur'} ]">
							<el-upload ref="repairpicture"  list-type="picture-card"
								:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/userfiles/dlyrl/oa/fixedrepair/fixedRepair`"
								:headers="{token: $cookie.get('token')}" :on-preview="(file, fileList) => {
					       $alert(`<img style='width:100%' src=' ${(file.response && file.response.url) || file.url}'/>`,  {
					         dangerouslyUseHTMLString: true,
					         showConfirmButton: false,
					         closeOnClickModal: true,
					         customClass: 'showPic'
					       });
					   }" :on-success="(response, file, fileList) => {
					      restores.repairpicture = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
					   }" :on-remove="(file, fileList) => {
					     $http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
					       $message.success(data.msg)
					     })
					     restores.repairpicture = fileList.map(item => item.url).join('|')
					   }" :before-remove="(file, fileList) => {
					     return $confirm(`确定移除 ${file.name}？`)
					   }" multiple :limit="5" :on-exceed="(files, fileList) =>{
					     $message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
					   }" :file-list="assetsPpictureArra">
								<i class="el-icon-plus"></i>
							</el-upload>
						</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="描述" prop="repaircontent" :rules="[ {required: true, message:'描述不能为空', trigger:'blur'} ]">
						<el-input type="textarea" v-model="restores.repaircontent" placeholder="请填写维修描述"></el-input>
					</el-form-item>
				</el-col>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" @click="resetRestores">关闭</el-button>
				<el-button size="small" type="primary" @click="restore">确定</el-button>
			</span>
		</el-dialog>
		<div class="bg-white top">
			<el-row>
				<el-button v-if="hasPermission('dlyrl:oa:fixedassets:fixedAssets:add')" type="primary" size="small"
					icon="el-icon-plus" @click="add()">新建</el-button>
				<el-button v-if="hasPermission('dlyrl:oa:fixedassets:fixedAssets:edit')" type="warning" size="small"
					icon="el-icon-edit-outline" @click="edit()" :disabled="dataListSelections.length != 1" plain>修改
				</el-button>
				<el-button v-if="hasPermission('dlyrl:oa:fixedassets:fixedAssets:del')" type="danger" size="small"
					icon="el-icon-delete" @click="del()" :disabled="dataListSelections.length <= 0" plain>删除
				</el-button>
				<el-button-group class="pull-right">
					<el-button v-if="hasPermission('dlyrl:oa:fixedassets:fixedAssets:import')" type="default"
						size="small" icon="el-icon-upload2" title="导入" @click="isImportCollapse = !isImportCollapse">
					</el-button>
					<el-button v-if="hasPermission('dlyrl:oa:fixedassets:fixedAssets:export')" type="default"
						size="small" icon="el-icon-download" title="导出" @click="exportExcel()"></el-button>
					<el-button type="default" size="small" icon="el-icon-refresh" @click="refreshList">
					</el-button>
				</el-button-group>
			</el-row>
			<el-table :data="dataList" size="small" height="calc(100% - 80px)" @selection-change="selectionChangeHandle"
				@sort-change="sortChangeHandle" v-loading="loading" class="table"
				:cell-style="cellStyle" style="border:1px solid #d6cfe2;"
				:header-cell-class-name="cellHeadStyle" 
				:row-class-name="tableRowClassName">
				<el-table-column type="selection" header-align="center" align="center" width="50">
				</el-table-column>
				<el-table-column prop="assetsSort" show-overflow-tooltip label="资产分类">
					<template slot-scope="scope">
						<el-link type="primary" :underline="false" @click="view(scope.row.id)">
							{{scope.row.assetsSort}}</el-link>
					</template>
				</el-table-column>
				<el-table-column prop="assetsNumber" show-overflow-tooltip label="资产编码">
				</el-table-column>
				<el-table-column prop="assetsName" show-overflow-tooltip label="资产名称">
				</el-table-column>
				<el-table-column prop="specificate" show-overflow-tooltip label="规格型号">
				</el-table-column>
				<el-table-column prop="unit" show-overflow-tooltip label="计量单位">
				</el-table-column>
				<el-table-column prop="assetsTtype" show-overflow-tooltip label="资产状态">
					<template slot-scope="scope">
						{{ $dictUtils.getDictLabel("assets_type", scope.row.assetsTtype, '-') }}
					</template>
				</el-table-column>
				<el-table-column prop="storageAddress" show-overflow-tooltip label="存放地点">
				</el-table-column>
				<!-- <el-table-column prop="office.name" show-overflow-tooltip label="归属部门">
				</el-table-column> -->
				<!-- <el-table-column prop="epc" show-overflow-tooltip label="EPC">
				</el-table-column>
				<el-table-column prop="tid" show-overflow-tooltip label="TID">
				</el-table-column> -->
				<!-- <el-table-column prop="supplier" show-overflow-tooltip label="供应商">
				</el-table-column>
				<el-table-column prop="suppliertel" show-overflow-tooltip label="供应商电话" width="100">
				</el-table-column>
				<el-table-column prop="supplierAddre" show-overflow-tooltip label="供应商地址" width="100">
				</el-table-column> -->
				<el-table-column prop="purchaseDate" show-overflow-tooltip label="购买日期">
				</el-table-column>
				<!-- <el-table-column prop="wearcycle" show-overflow-tooltip label="损耗周期(月)" width="100">
				</el-table-column> -->
				<el-table-column prop="price" show-overflow-tooltip label="购买价格">
				</el-table-column>
				<el-table-column prop="useoffice.name" show-overflow-tooltip label="使用部门">
				</el-table-column>
				<el-table-column prop="user.name" show-overflow-tooltip label="使用人">
				</el-table-column>
				<el-table-column prop="applyTime" show-overflow-tooltip label="申请使用时间" width="100">
				</el-table-column>
				<!-- <el-table-column prop="useMarkcard" show-overflow-tooltip label="使用信息标识卡" width="120">
				</el-table-column> -->
				<!-- <el-table-column prop="assetsPpicture" show-overflow-tooltip label="资产图片">
					<template slot-scope="scope" v-if="scope.row.assetsPpicture">
						<el-image style="height: 50px;width:50px;margin-right:10px;" :src="src"
							v-for="(src, index) in scope.row.assetsPpicture.split('|')" :key="index"
							:preview-src-list="scope.row.assetsPpicture.split('|')">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column prop="markCard" show-overflow-tooltip label="固定资产标识卡" width="120">
				</el-table-column>
				<el-table-column prop="newParam" show-overflow-tooltip label="新参数">
				</el-table-column>
				<el-table-column prop="remarks" show-overflow-tooltip label="备注信息">
				</el-table-column> -->
				<el-table-column header-align="center" align="center" fixed="right" :key="Math.random()" width="200"
					label="操作">
					<template slot-scope="scope">
						<!-- <el-button v-if="hasPermission('dlyrl:oa:fixedassets:fixedAssets:view')" type="text"
							icon="el-icon-view" size="mini" @click="view(scope.row.id)">查看</el-button> -->
						<el-button v-if="hasPermission('dlyrl:oa:fixedassets:fixedAssets:edit')" type="text"
							icon="el-icon-edit" size="mini" @click="edit(scope.row.id)">修改</el-button>
						<el-button v-if="hasPermission('dlyrl:oa:fixedassets:fixedAssets:del')" type="text"
							icon="el-icon-delete" size="mini" @click="del(scope.row.id)">删除</el-button>
						<el-button v-if="scope.row.assetsTtype=='2'" type="text" @click="restoreDialogs(scope.row.id)"
							icon="el-icon-refresh-right" size="mini">维修完成</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
				:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" background
				layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
		</div>
		<!-- 弹窗, 新增 / 修改 -->
		<FixedAssetsForm ref="fixedAssetsForm" @refreshDataList="refreshList"></FixedAssetsForm>
	</div>
</template>

<script>
	import tableStyles from '../../../../../utils/mixins.js'
	import FixedAssetsForm from './FixedAssetsForm'
	import SelectTree from '@/components/treeSelect/treeSelect.vue'
	export default {
		mixins: [tableStyles],
		data() {
			return {
				companyId:this.$store.state.user.companyId,
				searchForm: {
					assetsTtype: '',
					office: {
						id: ''
					},
					assetsNumber: '',
					assetsName: ''
				},
				dataList: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				orderBy: '',
				dataListSelections: [],
				isImportCollapse: false,
				loading: false,
				restoreDialog:false,
				assetsPpictureArra:[],
				restores:{
					fixed:{
						id:'',
					},
					repairpicture:'',
					repaircontent:'',
				}
			}
		},
		components: {
			SelectTree,
			FixedAssetsForm
		},
		activated() {
			this.refreshList()
		},
		methods: {
			restoreDialogs(id){
				this.restores.fixed.id=id;
				this.restoreDialog=true;
			},
			resetRestores(){
				this.assetsPpictureArra=[];
				this.$refs.restores.resetFields();
				this.restoreDialog=false;
			},
			restore(){
				this.$http({
					url: '/dlyrl/oa/fixedrepair/fixedRepair/updateRepair',
					method: 'post',
					data: this.restores
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.$refs.restores.resetFields();
						this.assetsPpictureArra=[];
						this.restoreDialog=false;
						this.refreshList();
					}
				})
			},
			// 获取数据列表
			refreshList() {
				this.loading = true
				this.$http({
					url: '/dlyrl/oa/fixedassets/fixedAssets/list',
					method: 'get',
					params: {
						'pageNo': this.pageNo,
						'pageSize': this.pageSize,
						'orderBy': this.orderBy,
						...this.searchForm
					}
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.dataList = data.page.list
						this.total = data.page.count
						this.loading = false
					}
				})
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val
				this.pageNo = 1
				this.refreshList()
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageNo = val
				this.refreshList()
			},
			// 多选
			selectionChangeHandle(val) {
				this.dataListSelections = val
			},

			// 排序
			sortChangeHandle(obj) {
				if (obj.order === 'ascending') {
					this.orderBy = obj.prop + ' asc'
				} else if (obj.order === 'descending') {
					this.orderBy = obj.prop + ' desc'
				} else {
					this.orderBy = ''
				}
				this.refreshList()
			},
			// 新增
			add() {
				this.$refs.fixedAssetsForm.init('add', '')
			},
			// 修改
			edit(id) {
				id = id || this.dataListSelections.map(item => {
					return item.id
				})[0]
				this.$refs.fixedAssetsForm.init('edit', id)
			},
			// 查看
			view(id) {
				this.$refs.fixedAssetsForm.init('view', id)
			},
			// 删除
			del(id) {
				let ids = id || this.dataListSelections.map(item => {
					return item.id
				}).join(',')
				this.$confirm(`确定删除所选项吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true
					this.$http({
						url: '/dlyrl/oa/fixedassets/fixedAssets/delete',
						method: 'delete',
						params: {
							'ids': ids
						}
					}).then(({
						data
					}) => {
						if (data && data.success) {
							this.$message.success(data.msg)
							this.refreshList()
						}
						this.loading = false
					})
				})
			},
			// 导入成功
			uploadSuccess(res, file) {
				if (res.success) {
					this.$message.success({
						dangerouslyUseHTMLString: true,
						message: res.msg
					})
				} else {
					this.$message.error(res.msg)
				}
			},
			// 下载模板
			downloadTpl() {
				this.$utils.download('/dlyrl/oa/fixedassets/fixedAssets/import/template')
			},
			exportExcel() {
				let params = {
					...this.searchForm
				}
				this.$utils.download('/dlyrl/oa/fixedassets/fixedAssets/export', params)
			},
			resetSearch() {
				this.$refs.searchForm.resetFields()
				this.refreshList()
			}
		}
	}
</script>
